@import "_deps"

yellow = #FFDD00
orange = #FF9D00

html {
  box-sizing: border-box;
}
*, *:before, *:after {
  box-sizing: inherit;
}

.slides > article
  padding 50px
  &:before
    content ''
    display block
    width 100%
    height 100%
    position absolute
    filter grayscale(100%) contrast(160%)
    background:url(images/3.jpg); // blacksmith
    background-size cover
    top 0
    left 0
    z-index -2
  &:after
    z-index -1
    content ''
    display block
    width 100%
    height 100%
    position absolute
    top 0
    left 0
    opacity 0.8
  &.plain
    &:before, &:after
      display none

.slides > article:nth-child(5n+1):after    
    background-image linear-gradient(-208deg, #81af9b 0%, #7aa8ac 27%, #6693da 100%)

.slides > article:nth-child(5n+2):after    
    background-image: linear-gradient(-132deg, #FFDD00 0%, #6DD7BA 100%);


.slides > article.old-tools
  &:before
    background-image url("images/soldering.jpg") !important
    background-size contain
  &:after
    opacity 0.1

// Mixin
random(min,max)
  return floor(math(0, 'random')*(max - min + 1) + min)

randomColor()
  return rgb(random(0,255),random(0,255),random(0,255))

combos = (#825854 #3de7e4) (#29519e #94eced) (#e26ab5 #1e4823) (#11feec #FF00E0) (#006C8D #006C8D) (#3a5c8e #eb821b) (#ca5723 #7d5794) (#6aa4e1 #ae5ceb) (#226443 #5e9ccd) (#6d6528 #3768f7) (#2decf5 #52aeea) (#d07dd7 #e1e34a) (#3456fd #14e839) (#f8078c #17156b)

randomGradient()
  n = random(1,13)
  combo = combos[n]
  return combo
  
for num in 1...40
  path = "images/"+ random(1,10)+".jpg"
  combo = randomGradient();
  .slides > article:nth-child(39n+{num})
    &:before
      background-image url(path) 
      content combo[1]
    &:after    
      background-image linear-gradient(random(0,360)deg, combo[1] 0%, combo[0] 100%);
  

// .slides > article:nth-child(1n):after    
//     background-image: linear-gradient(-173deg, #007EFF 0%, #6DD7BA 51%);

h1,h2,h3,h4,h5,h6
  font-family bangers
  font-weight 100
  letter-spacing 1px
  line-height 1
  text-shadow 5px 5px 0 rgba(0,0,0,0.3)
  margin 15px 0
 
p, a, li
  text-shadow 4px 3px 0 rgba(0,0,0,0.3)
  margin 15px 0

p, li, small
  color white
  font-size 50px  
  font-weight 700

small
  font-size 25px

h1
  transform skew(0, -8deg)
  font-size 120px
  color yellow
  a
    text-decoration none
    font-size 20px
    color black
    padding-left 10px

h2
  font-size 200px
  color yellow
  line-height 1
  margin 0

.large
  font-size 200px

.big
  font-size 250px

.huge
  font-size 450px

h3
  font-size 70px
  color yellow
  line-height 1.5

h4
  color yellow
  font-size 50px

.halves
  width 100%

.half
  width 50%


img.wide
  width 100%
  height auto
  max-height none

img.high
  width auto
  height 100%
  max-height 1200px
  
.hl
  color yellow

article.treats
  h1
    margin-bottom 90px
    font-size 250px
    color orange
    
    
.flex 
  display flex !important
  & > *
    flex 1
    &:before
      content  ''


.emoji
  font-size 116px
  font-family serif
